<template>
  <el-row>
    <el-col :span="6">
      <el-statistic :value="summaryData.effectiveActivityCount">
        <template #title>
          <div style="display: inline-flex; align-items: center">市场活动</div>
        </template>
        <template #suffix>/{{summaryData.totalActivityCount}}</template>
      </el-statistic>
    </el-col>

    <el-col :span="6">
      <el-statistic title="线索总数" :value="summaryData.totalClueCount" />
    </el-col>

    <el-col :span="6">
      <el-statistic title="客户总数" :value="summaryData.totalCustomerCount" />
    </el-col>

    <el-col :span="6">
      <el-statistic :value="summaryData.successTranAmount">
        <template #title>
          <div style="display: inline-flex; align-items: center">交易总额</div>
        </template>
        <template #suffix>/{{summaryData.totalTranAmount}}</template>
      </el-statistic>
    </el-col>
  </el-row>

  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="saleFunnelChart" style="width: 500px;height:400px;margin-top: 20px;float: left"></div>

  <div id="resourcePieChart" style="width: 500px;height:400px;margin-top: 20px;float: right"></div>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import * as echarts from 'echarts';

export default {
  name: "StatisticView",

  data(){
    return {
      summaryData: {},
    }
  },

  mounted() {
    this.loadSummary();
    this.loadSaleFunnelChart();
    this.loadResourcePieChart()
  },

  methods: {
    // 加载概要统计
    loadSummary(){
      doGet('/api/summary/data',{}).then(resp=>{
        if (resp.data.code===200){
          this.summaryData = resp.data.data;
        }
      })
    },

    // 加载销售漏斗数据
    loadSaleFunnelChart(){
      doGet("/api/saleFunnel/data",{}).then(resp=>{
        if (resp.data.code===200){
           let saleFunnelData = resp.data.data;
          let chartDom = document.getElementById('saleFunnelChart');
          let myChart = echarts.init(chartDom);
          let option = {
            title: {
              text: '销售漏斗图',

            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}'
            },
            legend: {
              data: ['成交', '交易', '客户', '线索']
            },
            series: [
              {
                name: '销售漏斗',
                type: 'funnel',
                left: '10%',
                top: 35,
                bottom: 60,
                width: '70%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside'
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 10
                  }
                },
                data: saleFunnelData
              }
            ]
          };
          option && myChart.setOption(option);
        }
      })
    },

    // 加载线索来源饼图
    loadResourcePieChart(){
      doGet('/api/resourceClue/data',{}).then((resp)=>{
        if (resp.data.code===200){
          let resourceClueData = resp.data.data;

          var chartDom = document.getElementById('resourcePieChart');
          var myChart = echarts.init(chartDom);
          var option = {
            title: {
              text: '线索来源统计',
              left: 'center',
              top: 'bottom'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'horizontal',
              left: 'left',
            },
            series: [
              {
                name: '线索来源',
                type: 'pie',
                radius: '60%',
                data: resourceClueData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          option && myChart.setOption(option);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>